<template>
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside :width="aside_width" style="background-color: rgb(238, 241, 246);height: 100vh; ">
            <Aside :isCollapse="isCollapse"></Aside>
        </el-aside>

        <el-container style="height: 100%;">
            <el-header style="text-align: right; font-size: 12px;border-bottom: darkblue 3px solid">
                <Header @doCollapse="doCollapse" :icon="icon"></Header>
            </el-header>

            <el-main>
<!--                <Main></Main>-->
                <router-view/>
            </el-main>

        </el-container>
    </el-container>

</template>

<script>
    import Aside from "@/components/Aside";
    import Header from "@/components/Header";
    // import Main from "@/components/Main";

    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Index",
        components:{
            Header,
            Aside
            // Main
        },
        data:function() {
            return {
                isCollapse:false,
                aside_width: '200px',
                icon:'el-icon-s-fold'
            };
        },
        methods:{
            doCollapse(){
                this.isCollapse = !this.isCollapse
                if (!this.isCollapse){  //菜单栏展开状态
                    this.aside_width = '200px'
                    this.icon = 'el-icon-s-fold'
                }else {
                    //菜单栏关闭状态状态
                    this.aside_width = '64px'
                    this.icon = 'el-icon-s-unfold'
                }
            }
        }

    }
</script>

<style scoped>
    .el-header {
        /*background-color: #B3C0D1;*/
        color: #333;
        line-height: 60px;
    }
    .el-main{
        padding: 5px;
    }
    .el-aside {
        color: #333;
    }
</style>